<template>
	<view class="content">
		<view class="add-group-input-item">
			<text>{{i18n.Account}}</text>
			<input type="text" value=""  :placeholder="i18n.PleaseEnterAnAccount" v-model="username"/>
		</view>
		<view class="add-group-input-item">
			<text>{{i18n.EmailAddressOfTheAccountToBeBound}}</text>
			<input type="text" value="" :placeholder="i18n.p_EmailAddressOfTheAccountToBeBound" v-model="useremail"/>
		</view>
		<view class="add-group-input-item">
			<text>{{i18n.p_password_OfTheAccountToBeBound}}</text>
			<input type="text" value=""  :placeholder="i18n.p_enter_paddword" v-model="userpassword" maxlength="6"/>
		</view>
		
		<view class="add-group-input-item">
			<text>{{i18n.p_enter_online_emailverfi}}</text>
			<input type="text" value=""  :placeholder="i18n.enter_vcode" v-model="yzm" maxlength="6"/>
			<view class="send-msg" hover-class="active" @tap.stop="sendSm" :class="{'act':sendyzm}"> {{yzmContent || i18n.get_vcode}} </view>
		</view>
		<button type="primary" hover-class="active" @tap.stop="add" :loading="loading">{{i18n.submit}}</button>
		<Load v-if="showLoad"></Load>
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		components:{
			Load
		},
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang'
			])
		},
		data() {
			return {
				yzmContent: '',
				timer:'',
				yzmTime:60,
				loading:false,
				showLoad:false,
				username:'',
				useremail:'',
				userpassword:'',
				sendyzm:false,
				yzm:''
			}
		},
		methods:{
			verfiEmail(){
				if(!this.useremail || this.useremail==""){
					uni.showToast({
						title:this.i18n.BindMailboxCannotBeEmpty,
						icon:'none'
					})
					return false;
				}
				//验证邮箱格式
				let ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if(!ePattern.test(this.useremail)){
					uni.showToast({
						title:this.i18n.BindMailboxFormatIsIncorrect,
						icon:'none'
					})
					return false;
				}
				return true;
			},
			cleck(){
				if(!this.username || this.username==""){
					uni.showToast({
						title:this.i18n.AccountCannotBeEmpty,
						icon:'none'
					})
					return false;
				}
				if(!this.useremail || this.useremail==""){
					uni.showToast({
						title:this.i18n.BindMailboxCannotBeEmpty,
						icon:'none'
					})
					return false;
				}
				//验证邮箱格式
				let ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if(!ePattern.test(this.useremail)){
					uni.showToast({
						title:this.i18n.BindMailboxFormatIsIncorrect,
						icon:'none'
					})
					return false;
				}
				if(!this.userpassword || this.userpassword==""){
					uni.showToast({
						title:this.i18n.TransactionPasswordCannotBeEmpty,
						icon:'none'
					})
					return false;
				}
				if(!this.yzm || this.yzm==""){
					uni.showToast({
						title:this.i18n.verificationCodeMustBeFilled,
						icon:'none'
					})
					return false;
				}
				return true;
			},
			sendSm(){
				this.showLoad = false; 
				if(!this.verfiEmail()){this.showLoad = false; return;};
				if(this.sendyzm){ return }
				let url,name;
				let mPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if(mPattern.test(this.useremail)){
					url = this.getRequestUrl + '/api/sms/emailverify'
					name = this.useremail
				}else{
					url = this.getRequestUrl + '/api/sms/sendsms'
					name = (this.getIncode.code + '') + this.useremail
				}
				clearTimeout(this.timer);
				let data ={
					name:name,
					lang_type:this.getLang
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					this.showLoad = false;
					showToast(res.data.msg)
					if (res.statusCode == 200 && res.data.code == 1) {
						// 请求成功
						// let _this = this
						this.sendyzm = true
						this._loopTime()
						
					}
				})
			},
			_loopTime() {
				this.yzmTime--;
				this.yzmContent = this.yzmTime + "s";
				this.timer = setTimeout(this._loopTime, 1000)
				if(this.yzmTime < 0){
					this.yzmContent = this.i18n.get_vcode
					clearTimeout(this.timer)
					this.sendyzm = false
				}
			},
			add(){
				this.loading = true;
				this.showLoad = true;
				setTimeout(()=>{this.loading = false;this.showLoad = false;},2000)
				
				let ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				let type = ePattern.test(this.useremail)?1:2;
				
				let url = this.getRequestUrl + "/api/user/bindUser"
				let data = {
					id        : this.getLoginInfo.id,
					token     : this.getLoginInfo.token,
					lang_type : this.getLang,
					paypwd    : this.userpassword,
					type      : type,
					yzm       : this.yzm,
					email     : this.useremail,
					banduser  : this.username
				}
				fetch(url,data,'POST').then(res=>{
					// this.username = '';
					// this.useremail = '';
					// this.yzm = '';
					// this.userpassword = '';
					this.loading = false;
					this.showLoad = false;
					showToast(res.data.msg)
					if(res.data.code == 1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scopeds>
	.content{
		padding:0 30upx;
		.add-group-input-item{
			padding-top: 46upx;
			position: relative;
			text{
				font-size:26upx;
				color: #333333;
			}
			background-color: #FFFFFF;
			border-bottom: 1upx solid #cfcfcf;
			input{
				line-height: 78upx;
				height: 78upx;
			}
			view{
				line-height: 78upx;
				height: 78upx;
				position: absolute;
				right: 13upx;
				bottom: 0;
				color: #0D79FF;
				z-index: 9;
				&.active{
					transform: scale(.9);
					opacity: .9;
				}
				&.act{
					color: #727272;
				}
			}
		}
		button{
			margin-top: 42upx;
			width: 330upx;
			height: 70upx;
			line-height: 70upx;
			background: linear-gradient(to right , #0C48E0, #2AA2FF);
			border-radius:35upx;
			color: #FFFFFF;
			font-size:24upx;
			&.active{
				transform: scale(.9);
				opacity: .9;
			}
		}
	}
	
</style>
